<?php if (!defined('THINK_PATH')) exit();?><!DOCTYPE html>
<html lang="zh-CN">
	
<head>
	<title>Vue-Router 进阶 — Vue.js</title>
	<meta charset="utf-8">
	<meta name="description" content="Vue.js - The Progressive JavaScript Framework">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

	<script src="/js/jquery-3.1.0.min.js" type="text/javascript"></script>
	<script type="text/javascript" src="/js/prettify.js"></script>
	<script type="text/javascript" src="/js/content.js"></script>
	<link rel="stylesheet" href="/css/prettify.css">
	<link rel="icon" href="/images/logo.png" type="image/png">


	<link rel="stylesheet" type="text/css" href="/css/vuex.css"/>
	<script type="text/javascript" src="/js/vue.js"></script>



	<!-- main page styles -->
	<link rel="stylesheet" href="/css/page.css">
<style type="text/css">
	.content .linenums>ol {
		margin: 0;
		padding-left:35px;
	}
	.hljs-comment,.hljs-quote{color:#8e908c}
	.hljs-deletion,.hljs-name,.hljs-regexp,.hljs-selector-class,.hljs-selector-id,.hljs-tag,.hljs-template-variable,.hljs-variable{color:#c82829}
	.hljs-built_in,.hljs-builtin-name,.hljs-link,.hljs-literal,.hljs-meta,.hljs-number,.hljs-params,.hljs-type{color:#f5871f}
	.hljs-attribute{color:#eab700}
	.hljs-addition,.hljs-bullet,.hljs-string,.hljs-symbol{color:#718c00}
	.hljs-section,.hljs-title{color:#4271ae}
	.hljs-keyword,.hljs-selector-tag{color:#8959a8}
	.hljs{display:block;overflow-x:auto;background:#fff;color:#4d4d4c;padding:.5em}
	.hljs-emphasis{font-style:italic}
	.hljs-strong{font-weight:700}
</style>
</head>

<body class="docs">


<div id="header">
	<a id="logo" href="https://cn.vuejs.org/">
		<img src="/images/logo.png">
		<span>Vuecli</span>
	</a>
</div>


<div id="main" class="fix-sidebar">
	<div class="sidebar">
		<div class="sidebar-inner">
			<div class="list">
			<ul class="menu-root">
	<li>
		<h3>知识点</h3>
	</li>
	<li id="stylus" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/stylus" class="sidebar-link">stylus</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#变量">变量</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#@import引入">@import引入</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/stylus#特殊用法">特殊用法</a>
			</li>
<!--
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/index#Vue-js-是什么">Vue.js 是什么</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/index#与自定义元素的关系">与自定义元素的关系</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/index#准备好了吗？">准备好了吗？</a>
			</li> -->
		</ul>
	</li>

	<li id="axios" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/axios" class="sidebar-link">axios</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Features">Features</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#浏览器支持">浏览器支持</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#安装">安装</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Example">Example</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#API">axios API</a>
			</li>
			<ul>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#请求方法的别名">请求方法的别名</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#并发">并发</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#创建实例">创建实例</a>
				</li>
				<li>
					<a class="section-link" data-scroll="" href="/Vuecli/axios#实例方法">实例方法</a>
				</li>
			</ul>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#请求配置">请求配置</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#响应结构">响应结构</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#defaults">配置的默认值/defaults</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#拦截器">拦截器</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#错误处理">错误处理</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#取消">取消</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/axios#Semver">Semver</a>
			</li>
		</ul>
	</li>


	<li>
		<h3>Vue Router</h3>
	</li>
	<li id="vrouter-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vrouter-start#introduce" data-scroll="" class="section-link">介绍</a></li>
		</ul>
	</li>
	<li id="vrouter-basic" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-basic" class="sidebar-link">基础</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-basic#start" class="section-link">起步</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#start-html" class="section-link">HTML</a></li>
				<li><a href="/Vuecli/vrouter-basic#start-javascript" class="section-link">JavaScript</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#dynamic_matching" class="section-link">动态路由匹配</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-响应路由参数的变化" class="section-link">响应路由参数的变化</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-高级匹配模式" class="section-link">高级匹配模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#dynamic_matching-匹配优先级" class="section-link">匹配优先级</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#nested-routes" class="section-link">嵌套路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#navigation" class="section-link">编程式的导航</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named-routes" class="section-link">命名路由</a></li>
			
			<li><a href="/Vuecli/vrouter-basic#named_views" class="section-link">命名视图</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#named_views-嵌套命名视图" class="section-link">嵌套命名视图</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#redirect_and_alias" class="section-link">重定向和别名</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-重定向" class="section-link">重定向</a></li>
				<li><a href="/Vuecli/vrouter-basic#redirect_and_alias-别名" class="section-link">别名</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#passing_props" class="section-link">路由组件传参</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#passing_props-布尔模式" class="section-link">布尔模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-对象模式" class="section-link">对象模式</a></li>
				<li><a href="/Vuecli/vrouter-basic#passing_props-函数模式" class="section-link">函数模式</a></li>
			</ul>

			<li><a href="/Vuecli/vrouter-basic#history_mode" class="section-link">HTML5 History 模式</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-basic#history_mode-后端配置例子" class="section-link">后端配置例子</a></li>
				<li><a href="/Vuecli/vrouter-basic#history_mode-警告" class="section-link">警告</a></li>
			</ul>
		</ul>
	</li>
	<li id="vrouter-advanced" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vrouter-advanced" class="sidebar-link">进阶</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vrouter-advanced#navigation_guards" class="section-link">导航守卫</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局守卫" class="section-link">全局守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局解析守卫" class="section-link">全局解析守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-全局后置钩子" class="section-link">全局后置钩子</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-路由独享的守卫" class="section-link">路由独享的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-组件内的守卫" class="section-link">组件内的守卫</a></li>
				<li><a href="/Vuecli/vrouter-advanced#navigation_guards-完整的导航解析流程" class="section-link">完整的导航解析流程</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#meta" class="section-link">路由元信息</a></li>
		
			<li><a href="/Vuecli/vrouter-advanced#transitions" class="section-link">过渡动效</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#transitions-单个路由的过渡" class="section-link">单个路由的过渡</a></li>
				<li><a href="/Vuecli/vrouter-advanced#transitions-基于路由的动态过渡" class="section-link">基于路由的动态过渡</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#data_fetching" class="section-link">数据获取</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-导航完成后获取数据" class="section-link">导航完成后获取数据</a></li>
				<li><a href="/Vuecli/vrouter-advanced#data_fetching-在导航完成前获取数据" class="section-link">在导航完成前获取数据</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#scroll_behavior" class="section-link">滚动行为</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#scroll_behavior-异步滚动" class="section-link">异步滚动</a></li>
			</ul>
		
			<li><a href="/Vuecli/vrouter-advanced#lazy_loading" class="section-link">路由懒加载</a></li>
			<ul>
				<li><a href="/Vuecli/vrouter-advanced#lazy_loading-把组件按组分块" class="section-link">把组件按组分块</a></li>
			</ul>
		</ul>
	</li>


	<li>
		<h3>Vuex</h3>
	</li>
	<li id="vuex-start" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-start" class="sidebar-link">安装 与 介绍</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-start#installation" data-scroll="" class="section-link">安装</a></li>
			<li><a href="/Vuecli/vuex-start#introduce" data-scroll="" class="section-link">Vuex 是什么？</a></li>
			<li><a href="/Vuecli/vuex-start#vrouter-basic0" data-scroll="" class="section-link">开始</a></li>
		</ul>
	</li>
	<li id="vuex-guide" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-guide" class="sidebar-link">核心概念</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-guide#state" data-scroll="" class="section-link">State</a></li>
			<li><a href="/Vuecli/vuex-guide#getters" data-scroll="" class="section-link">Getter</a></li>
			<li><a href="/Vuecli/vuex-guide#mutations" data-scroll="" class="section-link">Mutation</a></li>
			<li><a href="/Vuecli/vuex-guide#actions" data-scroll="" class="section-link">Action</a></li>
			<li><a href="/Vuecli/vuex-guide#modules" data-scroll="" class="section-link">Module</a></li>
		</ul>
	</li>
	<li id="vuex-important" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/vuex-important" class="sidebar-link">重点知识</a>
		<ul class="menu-sub">
			<li><a href="/Vuecli/vuex-important#structure" data-scroll="" class="section-link">项目结构</a></li>
			<li><a href="/Vuecli/vuex-important#plugins" data-scroll="" class="section-link">插件</a></li>
			<li><a href="/Vuecli/vuex-important#strict" data-scroll="" class="section-link">严格模式</a></li>
			<li><a href="/Vuecli/vuex-important#forms" data-scroll="" class="section-link">表单处理</a></li>
			<li><a href="/Vuecli/vuex-important#testing" data-scroll="" class="section-link">测试</a></li>
			<li><a href="/Vuecli/vuex-important#hot-reload" data-scroll="" class="section-link">热重载</a></li>
		</ul>
	</li>





	<li>
		<h3>框架布局</h3>
	</li>
	<li id="mulujiegou" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/mulujiegou" class="sidebar-link">目录结构</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#总体框架">总体框架</a>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#文件结构细分">文件结构细分</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#build">build - [webpack配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#config">config - [vue项目配置]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#node_modules">node_modules - [依赖包]</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/mulujiegou#router">router - [路由配置]</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>


	<li id="huanjingpeizhi" class="sidebar-menu">
		<i class="">＋</i>
		<a href="/Vuecli/huanjingpeizhi" class="sidebar-link">基于webpack 环境配置</a>
		<ul class="menu-sub">
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#安装">安装</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#node">安装node.js LTS版本 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#vuecli">安装vue-cil 全局安装一次 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#webpack">创建 webpack模板的项目 cmd</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器">运行服务器</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#运行服务器0">运行服务器 cmd</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#cmd其他操作命令">cmd其他操作命令</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#stylus">安装 stylus</a>
					</li>
				</ul>
			</li>
			<li>
				<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#代码初始化">代码初始化</a>
				<ul>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#viewport">viewport index.html</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#resetcss">reset.css 样式初始化</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#bordercss">border.css 1像素边框</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#fastclick">fastclick.js 解决点击延时</a>
					</li>
					<li>
						<a class="section-link" data-scroll="" href="/Vuecli/huanjingpeizhi#iconfont">iconfont</a>
					</li>
				</ul>
			</li>
		</ul>
	</li>

</ul>

			</div>
		</div>
	</div>

	
<div class="content guide with-sidebar components-guide">
<h1>Vue-Router 进阶</h1>	




<h2 id="navigation_guards">
	<a href="#navigation_guards" class="headerlink" title="navigation_guards" data-scroll="">导航守卫</a>
</h2>
<div class="tip custom-block">
	<p class="custom-block-title">译者注</p>
	<p>“导航”表示路由正在发生改变。</p>
</div>
<p>正如其名，<code>vue-router</code> 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。</p>
<p>记住<strong>参数或查询的改变并不会触发进入/离开的导航守卫</strong>。你可以通过<a href="/zh/guide/essentials/dynamic-matching.html#响应路由参数的变化" class="">观察
		<code>$route</code> 对象</a>来应对这些变化，或使用 <code>beforeRouteUpdate</code> 的组件内守卫。</p>
		
		
<h3 id="navigation_guards-全局守卫">
	<a href="#navigation_guards-全局守卫" class="headerlink" title="navigation_guards-全局守卫" data-scroll="">全局守卫</a>
</h3>

<p>你可以使用 <code>router.beforeEach</code> 注册一个全局前置守卫：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token operator">...</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>

router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于 <strong>等待中</strong>。</p>
<p>每个守卫方法接收三个参数：</p>
<ul>
	<li>
		<p><strong><code>to: Route</code></strong>: 即将要进入的目标 <a href="/zh/api/#路由对象" class="">路由对象</a></p>
	</li>
	<li>
		<p><strong><code>from: Route</code></strong>: 当前导航正要离开的路由</p>
	</li>
	<li>
		<p><strong><code>next: Function</code></strong>: 一定要调用该方法来 <strong>resolve</strong> 这个钩子。执行效果依赖 <code>next</code>
			方法的调用参数。</p>
		<ul>
			<li>
				<p><strong><code>next()</code></strong>: 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 <strong>confirmed</strong> (确认的)。</p>
			</li>
			<li>
				<p><strong><code>next(false)</code></strong>: 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 <code>from</code>
					路由对应的地址。</p>
			</li>
			<li>
				<p><strong><code>next('/')</code> 或者 <code>next({ path: '/' })</code></strong>:
					跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 <code>next</code> 传递任意位置对象，且允许设置诸如 <code>replace: true</code>、<code>name:
						'home'</code> 之类的选项以及任何用在 <a href="/zh/api/#to" class=""><code>router-link</code> 的 <code>to</code> prop</a> 或
					<a href="/zh/api/#router-push" class=""><code>router.push</code></a> 中的选项。</p>
			</li>
			<li>
				<p><strong><code>next(error)</code></strong>: (2.4.0+) 如果传入 <code>next</code> 的参数是一个 <code>Error</code>
					实例，则导航会被终止且该错误会被传递给 <a href="/zh/api/#router-onerror" class=""><code>router.onError()</code></a> 注册过的回调。</p>
			</li>
		</ul>
	</li>
</ul>
<p><strong>确保要调用 <code>next</code> 方法，否则钩子就不会被 resolved。</strong></p>





<h3 id="navigation_guards-全局解析守卫">
	<a href="#navigation_guards-全局解析守卫" class="headerlink" title="navigation_guards-全局解析守卫" data-scroll="">全局解析守卫</a>
</h3>

<blockquote>
	<p>2.5.0 新增</p>
</blockquote>
<p>在 2.5.0+ 你可以用 <code>router.beforeResolve</code> 注册一个全局守卫。这和 <code>router.beforeEach</code> 类似，区别是在导航被确认之前，<strong>同时在所有组件内守卫和异步路由组件被解析之后</strong>，解析守卫就被调用。</p>



<h3 id="navigation_guards-全局后置钩子">
	<a href="#navigation_guards-全局后置钩子" class="headerlink" title="navigation_guards-全局后置钩子" data-scroll="">全局后置钩子</a>
</h3>

<p>你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 <code>next</code> 函数也不会改变导航本身：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">afterEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token comment">// ...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>



<h3 id="navigation_guards-路由独享的守卫">
	<a href="#navigation_guards-路由独享的守卫" class="headerlink" title="navigation_guards-路由独享的守卫" data-scroll="">路由独享的守卫</a>
</h3>

<p>你可以在路由配置上直接定义 <code>beforeEnter</code> 守卫：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span>
      component<span class="token punctuation">:</span> Foo<span class="token punctuation">,</span>
      beforeEnter<span class="token punctuation">:</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// ...</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>这些守卫与全局前置守卫的方法参数是一样的。</p>




<h3 id="navigation_guards-组件内的守卫">
	<a href="#navigation_guards-组件内的守卫" class="headerlink" title="navigation_guards-组件内的守卫" data-scroll="">组件内的守卫</a>
</h3>

<p>最后，你可以在路由组件内直接定义以下路由导航守卫：</p>
<ul>
	<li><code>beforeRouteEnter</code></li>
	<li><code>beforeRouteUpdate</code> (2.2 新增)</li>
	<li><code>beforeRouteLeave</code></li>
</ul>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> Foo <span class="token operator">=</span> <span class="token punctuation">{</span>
  template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`...`</span></span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在渲染该组件的对应路由被 confirm 前调用</span>
    <span class="token comment">// 不！能！获取组件实例 `this`</span>
    <span class="token comment">// 因为当守卫执行前，组件实例还没被创建</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 在当前路由改变，但是该组件被复用时调用</span>
    <span class="token comment">// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，</span>
    <span class="token comment">// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。</span>
    <span class="token comment">// 可以访问组件实例 `this`</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 导航离开该组件的对应路由时调用</span>
    <span class="token comment">// 可以访问组件实例 `this`</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p><code>beforeRouteEnter</code> 守卫 <strong>不能</strong> 访问 <code>this</code>，因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建。</p>
<p>不过，你可以通过传一个回调给 <code>next</code>来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token function">next</span><span class="token punctuation">(</span>vm <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token comment">// 通过 `vm` 访问组件实例</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>注意 <code>beforeRouteEnter</code> 是支持给 <code>next</code> 传递回调的唯一守卫。对于 <code>beforeRouteUpdate</code> 和 <code>beforeRouteLeave</code>
	来说，<code>this</code> 已经可用了，所以<strong>不支持</strong>传递回调，因为没有必要了。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token comment">// just use `this`</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name <span class="token operator">=</span> to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>name
  <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 <code>next(false)</code> 来取消。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">beforeRouteLeave</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span> <span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">const</span> answer <span class="token operator">=</span> window<span class="token punctuation">.</span><span class="token function">confirm</span><span class="token punctuation">(</span><span class="token string">'Do you really want to leave? you have unsaved changes!'</span><span class="token punctuation">)</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>answer<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>




<h3 id="navigation_guards-完整的导航解析流程">
	<a href="#navigation_guards-完整的导航解析流程" class="headerlink" title="navigation_guards-完整的导航解析流程" data-scroll="">完整的导航解析流程</a>
</h3>
<ol>
	<li>导航被触发。</li>
	<li>在失活的组件里调用离开守卫。</li>
	<li>调用全局的 <code>beforeEach</code> 守卫。</li>
	<li>在重用的组件里调用 <code>beforeRouteUpdate</code> 守卫 (2.2+)。</li>
	<li>在路由配置里调用 <code>beforeEnter</code>。</li>
	<li>解析异步路由组件。</li>
	<li>在被激活的组件里调用 <code>beforeRouteEnter</code>。</li>
	<li>调用全局的 <code>beforeResolve</code> 守卫 (2.5+)。</li>
	<li>导航被确认。</li>
	<li>调用全局的 <code>afterEach</code> 钩子。</li>
	<li>触发 DOM 更新。</li>
	<li>用创建好的实例调用 <code>beforeRouteEnter</code> 守卫中传给 <code>next</code> 的回调函数。</li>
</ol>

	 
<br><br><br>


<h2 id="meta">
	<a href="#meta" class="headerlink" title="meta" data-scroll="">路由元信息</a>
</h2>	
<p>定义路由的时候可以配置 <code>meta</code> 字段：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      path<span class="token punctuation">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span>
      component<span class="token punctuation">:</span> Foo<span class="token punctuation">,</span>
      children<span class="token punctuation">:</span> <span class="token punctuation">[</span>
        <span class="token punctuation">{</span>
          path<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">,</span>
          component<span class="token punctuation">:</span> Bar<span class="token punctuation">,</span>
          <span class="token comment">// a meta field</span>
          meta<span class="token punctuation">:</span> <span class="token punctuation">{</span> requiresAuth<span class="token punctuation">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">]</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>那么如何访问这个 <code>meta</code> 字段呢？</p>
<p>首先，我们称呼 <code>routes</code> 配置中的每个路由对象为 <strong>路由记录</strong>。路由记录可以是嵌套的，因此，当一个路由匹配成功后，他可能匹配多个路由记录</p>
<p>例如，根据上面的路由配置，<code>/foo/bar</code> 这个 URL 将会匹配父路由记录以及子路由记录。</p>
<p>一个路由匹配到的所有路由记录会暴露为 <code>$route</code> 对象 (还有在导航守卫中的路由对象) 的 <code>$route.matched</code> 数组。因此，我们需要遍历 <code>$route.matched</code>
	来检查路由记录中的 <code>meta</code> 字段。</p>
<p>下面例子展示在全局导航守卫中检查元字段：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code>router<span class="token punctuation">.</span><span class="token function">beforeEach</span><span class="token punctuation">(</span><span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>matched<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>record <span class="token operator">=&gt;</span> record<span class="token punctuation">.</span>meta<span class="token punctuation">.</span>requiresAuth<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// this route requires auth, check if logged in</span>
    <span class="token comment">// if not, redirect to login page.</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>auth<span class="token punctuation">.</span><span class="token function">loggedIn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        path<span class="token punctuation">:</span> <span class="token string">'/login'</span><span class="token punctuation">,</span>
        query<span class="token punctuation">:</span> <span class="token punctuation">{</span> redirect<span class="token punctuation">:</span> to<span class="token punctuation">.</span>fullPath <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// 确保一定要调用 next()</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>

<br><br><br>


<h2 id="transitions">
	<a href="#transitions" class="headerlink" title="transitions" data-scroll="">过渡动效</a>
</h2>	
<p><code>&lt;router-view&gt;</code> 是基本的动态组件，所以我们可以用 <code>&lt;transition&gt;</code> 组件给它添加一些过渡效果：</p>
<div class="language-html extra-class">
	<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div>
<p><a href="https://cn.vuejs.org/guide/transitions.html" target="_blank" rel="noopener noreferrer">Transition 的所有功能<svg
		 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
		 class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a> 在这里同样适用。</p>
		

<h3 id="transitions-单个路由的过渡">
	<a href="#transitions-单个路由的过渡" class="headerlink" title="transitions-单个路由的过渡" data-scroll="">单个路由的过渡</a>
</h3>
		
<p>上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <code>&lt;transition&gt;</code> 并设置不同的 name。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> Foo <span class="token operator">=</span> <span class="token punctuation">{</span>
  template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`
    &lt;transition name="slide"&gt;
      &lt;div class="foo"&gt;...&lt;/div&gt;
    &lt;/transition&gt;
  `</span></span>
<span class="token punctuation">}</span>

<span class="token keyword">const</span> Bar <span class="token operator">=</span> <span class="token punctuation">{</span>
  template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`
    &lt;transition name="fade"&gt;
      &lt;div class="bar"&gt;...&lt;/div&gt;
    &lt;/transition&gt;
  `</span></span>
<span class="token punctuation">}</span>
</code></pre>
</div>



<h3 id="transitions-基于路由的动态过渡">
	<a href="#transitions-基于路由的动态过渡" class="headerlink" title="transitions-基于路由的动态过渡" data-scroll="">基于路由的动态过渡</a>
</h3>
<p>还可以基于当前路由与目标路由的变化关系，动态设置过渡效果：</p>
<div class="language-html extra-class">
	<pre class="language-html"><code><span class="token comment">&lt;!-- 使用动态的 transition name --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>transition</span> <span class="token attr-name">:name</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>transitionName<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>router-view</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>router-view</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>transition</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token comment">// 接着在父组件内</span>
<span class="token comment">// watch $route 决定使用哪种过渡</span>
watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
  <span class="token string">'$route'</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">const</span> toDepth <span class="token operator">=</span> to<span class="token punctuation">.</span>path<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
    <span class="token keyword">const</span> fromDepth <span class="token operator">=</span> <span class="token keyword">from</span><span class="token punctuation">.</span>path<span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">'/'</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length
    <span class="token keyword">this</span><span class="token punctuation">.</span>transitionName <span class="token operator">=</span> toDepth <span class="token operator">&lt;</span> fromDepth <span class="token operator">?</span> <span class="token string">'slide-right'</span> <span class="token punctuation">:</span> <span class="token string">'slide-left'</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>查看完整例子请<a href="https://github.com/vuejs/vue-router/blob/next/examples/transitions/app.js" target="_blank" rel="noopener noreferrer">移步这里<svg
		 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
		 class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>。</p>



<br><br><br>


<h2 id="data_fetching">
	<a href="#data_fetching" class="headerlink" title="data_fetching" data-scroll="">数据获取</a>
</h2>
<p>有时候，进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：</p>
<ul>
	<li>
		<p><strong>导航完成之后获取</strong>：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示“加载中”之类的指示。</p>
	</li>
	<li>
		<p><strong>导航完成之前获取</strong>：导航完成前，在路由进入的守卫中获取数据，在数据获取成功后执行导航。</p>
	</li>
</ul>
<p>从技术角度讲，两种方式都不错 —— 就看你想要的用户体验是哪种。</p>

<h3 id="data_fetching-导航完成后获取数据">
	<a href="#data_fetching-导航完成后获取数据" class="headerlink" title="data_fetching-导航完成后获取数据" data-scroll="">导航完成后获取数据</a>
</h3>
<p>当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 <code>created</code> 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。</p>
<p>假设我们有一个 <code>Post</code> 组件，需要基于 <code>$route.params.id</code> 获取文章数据：</p>
<div class="language-html extra-class">
	<pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>template</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>loading<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      Loading...
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>error<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      {{ error }}
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>post<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>content<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>h2</span><span class="token punctuation">&gt;</span></span>{{ post.title }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>h2</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>p</span><span class="token punctuation">&gt;</span></span>{{ post.body }}<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>p</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>template</span><span class="token punctuation">&gt;</span></span>
</code></pre>
</div>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      loading<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
      post<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      error<span class="token punctuation">:</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">created</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 组件创建完后获取数据，</span>
    <span class="token comment">// 此时 data 已经被 observed 了</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">fetchData</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  watch<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token comment">// 如果路由有变化，会再次执行该方法</span>
    <span class="token string">'$route'</span><span class="token punctuation">:</span> <span class="token string">'fetchData'</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">fetchData</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> <span class="token keyword">null</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">true</span>
      <span class="token comment">// replace getPost with your data fetching util / API wrapper</span>
      <span class="token function">getPost</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>$route<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>loading <span class="token operator">=</span> <span class="token boolean">false</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> err<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
          <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> post
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>

<h3 id="data_fetching-在导航完成前获取数据">
	<a href="#data_fetching-在导航完成前获取数据" class="headerlink" title="data_fetching-在导航完成前获取数据" data-scroll="">在导航完成前获取数据</a>
</h3>
<p>通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 <code>beforeRouteEnter</code> 守卫中获取数据，当数据获取成功后只调用 <code>next</code> 方法。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">export</span> <span class="token keyword">default</span> <span class="token punctuation">{</span>
  <span class="token function">data</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      post<span class="token punctuation">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
      error<span class="token punctuation">:</span> <span class="token keyword">null</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">beforeRouteEnter</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">getPost</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">next</span><span class="token punctuation">(</span>vm <span class="token operator">=&gt;</span> vm<span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token comment">// 路由改变前，组件就已经渲染完了</span>
  <span class="token comment">// 逻辑稍稍不同</span>
  <span class="token function">beforeRouteUpdate</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> next<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> <span class="token keyword">null</span>
    <span class="token function">getPost</span><span class="token punctuation">(</span>to<span class="token punctuation">.</span>params<span class="token punctuation">.</span>id<span class="token punctuation">,</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">setData</span><span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span>
      <span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  methods<span class="token punctuation">:</span> <span class="token punctuation">{</span>
    <span class="token function">setData</span> <span class="token punctuation">(</span>err<span class="token punctuation">,</span> post<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>err<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>error <span class="token operator">=</span> err<span class="token punctuation">.</span><span class="token function">toString</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>post <span class="token operator">=</span> post
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>在为后面的视图获取数据时，用户会停留在当前的界面，因此建议在数据获取期间，显示一些进度条或者别的指示。如果数据获取失败，同样有必要展示一些全局的错误提醒。</p>


<br><br><br>


<h2 id="scroll_behavior">
	<a href="#scroll_behavior" class="headerlink" title="scroll_behavior" data-scroll="">滚动行为</a>
</h2>
<p>使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 <code>vue-router</code> 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。</p>
<p><strong>注意: 这个功能只在支持 <code>history.pushState</code> 的浏览器中可用。</strong></p>
<p>当创建一个 Router 实例，你可以提供一个 <code>scrollBehavior</code> 方法：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token operator">...</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
  <span class="token function">scrollBehavior</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// return 期望滚动到哪个的位置</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p><code>scrollBehavior</code> 方法接收 <code>to</code> 和 <code>from</code> 路由对象。第三个参数 <code>savedPosition</code> 当且仅当
	<code>popstate</code> 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。</p>
<p>这个方法返回滚动位置的对象信息，长这样：</p>
<ul>
	<li><code>{ x: number, y: number }</code></li>
	<li><code>{ selector: string, offset? : { x: number, y: number }}</code> (offset 只在 2.6.0+ 支持)</li>
</ul>
<p>如果返回一个 falsy (译者注：falsy 不是 <code>false</code>，<a href="https://developer.mozilla.org/zh-CN/docs/Glossary/Falsy"
	 target="_blank" rel="noopener noreferrer">参考这里<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
		 viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>)的值，或者是一个空对象，那么不会发生滚动。</p>
<p>举例：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">scrollBehavior</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>对于所有路由导航，简单地让页面滚动到顶部。</p>
<p>返回 <code>savedPosition</code>，在按下 后退/前进 按钮时，就会像浏览器的原生表现那样：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">scrollBehavior</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> savedPosition
  <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>如果你要模拟“滚动到锚点”的行为：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">scrollBehavior</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>to<span class="token punctuation">.</span>hash<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">{</span>
      selector<span class="token punctuation">:</span> to<span class="token punctuation">.</span>hash
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>我们还可以利用<a href="/zh/guide/advanced/meta.html" class="">路由元信息</a>更细颗粒度地控制滚动。查看完整例子请<a href="https://github.com/vuejs/vue-router/blob/next/examples/scroll-behavior/app.js"
	 target="_blank" rel="noopener noreferrer">移步这里<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
		 viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>。</p>


<h3 id="scroll_behavior-异步滚动">
	<a href="#scroll_behavior-异步滚动" class="headerlink" title="scroll_behavior-异步滚动" data-scroll="">异步滚动</a>
</h3>
<blockquote>
	<p>2.8.0 新增</p>
</blockquote>
<p>你也可以返回一个 Promise 来得出预期的位置描述：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token function">scrollBehavior</span> <span class="token punctuation">(</span>to<span class="token punctuation">,</span> <span class="token keyword">from</span><span class="token punctuation">,</span> savedPosition<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
    <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> x<span class="token punctuation">:</span> <span class="token number">0</span><span class="token punctuation">,</span> y<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">500</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</div>
<p>将其挂载到从页面级别的过渡组件的事件上，令其滚动行为和页面过渡一起良好运行是可能的。但是考虑到用例的多样性和复杂性，我们仅提供这个原始的接口，以支持不同用户场景的具体实现。</p>

<br><br><br>


<h2 id="lazy_loading">
	<a href="#lazy_loading" class="headerlink" title="lazy_loading" data-scroll="">路由懒加载</a>
</h2>
<p>当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。</p>
<p>结合 Vue 的<a href="https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6"
	 target="_blank" rel="noopener noreferrer">异步组件<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px"
		 viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>和 Webpack 的<a href="https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/" target="_blank"
	 rel="noopener noreferrer">代码分割功能<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100"
		 width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>，轻松实现路由组件的懒加载。</p>
<p>首先，可以将异步组件定义为返回一个 Promise 的工厂函数 (该函数返回的 Promise 应该 resolve 组件本身)：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token comment">/* 组件定义对象 */</span> <span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>第二，在 Webpack 2 中，我们可以使用<a href="https://github.com/tc39/proposal-dynamic-import" target="_blank" rel="noopener noreferrer">动态
		import<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15"
		 height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>语法来定义代码分块点 (split point)：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Foo.vue'</span><span class="token punctuation">)</span> <span class="token comment">// 返回 Promise</span>
</code></pre>
</div>
<div class="tip custom-block">
	<p class="custom-block-title">注意</p>
	<p>如果您使用的是 Babel，你将需要添加 <a href="https://babeljs.io/docs/plugins/syntax-dynamic-import/" target="_blank" rel="noopener noreferrer"><code>syntax-dynamic-import</code><svg
			 xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15"
			 class="icon outbound">
				<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
				<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
			</svg></a> 插件，才能使 Babel 可以正确地解析语法。</p>
</div>
<p>结合这两者，这就是如何定义一个能够被 Webpack 自动代码分割的异步组件。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token string">'./Foo.vue'</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>在路由配置中什么都不需要改变，只需要像往常一样使用 <code>Foo</code>：</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> router <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">VueRouter</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  routes<span class="token punctuation">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span> path<span class="token punctuation">:</span> <span class="token string">'/foo'</span><span class="token punctuation">,</span> component<span class="token punctuation">:</span> Foo <span class="token punctuation">}</span>
  <span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
</div>


<h3 id="lazy_loading-把组件按组分块">
	<a href="#lazy_loading-把组件按组分块" class="headerlink" title="lazy_loading-把组件按组分块" data-scroll="">把组件按组分块</a>
</h3>
<p>有时候我们想把某个路由下的所有组件都打包在同个异步块 (chunk) 中。只需要使用 <a href="https://webpack.js.org/guides/code-splitting-require/#chunkname"
	 target="_blank" rel="noopener noreferrer">命名 chunk<svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" x="0px"
		 y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">
			<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path>
			<polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon>
		</svg></a>，一个特殊的注释语法来提供 chunk name (需要 Webpack &gt; 2.4)。</p>
<div class="language-js extra-class">
	<pre class="language-js"><code><span class="token keyword">const</span> <span class="token function-variable function">Foo</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: "group-foo" */</span> <span class="token string">'./Foo.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Bar</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: "group-foo" */</span> <span class="token string">'./Bar.vue'</span><span class="token punctuation">)</span>
<span class="token keyword">const</span> <span class="token function-variable function">Baz</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token keyword">import</span><span class="token punctuation">(</span><span class="token comment">/* webpackChunkName: "group-foo" */</span> <span class="token string">'./Baz.vue'</span><span class="token punctuation">)</span>
</code></pre>
</div>
<p>Webpack 会将任何一个异步模块与相同的块名称组合到相同的异步块中。</p>


	
</div>
		<!-- important -->

<!-- var end -->
</div>	<!-- #main -->

<script>
	
var thisAction = '<?php echo ($thisAction); ?>';

if (thisAction == 'all') {
	// sidebar全部显示
	var $link = $('.content .headerlink');
	var $slink = $('.section-link');
	
}else {
	// 仅展开 当前actionName
	$('.menu-sub').hide();
	$('#'+thisAction+'>a').addClass('current'); 
	$('#'+thisAction+'>i').addClass('sidebar-tap').html('－');
	$('#'+thisAction+' .menu-sub').show();


	$('.sidebar-menu>i').click(function(){
		if($(this).hasClass('sidebar-tap')) {
			$(this).html('＋').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').hide();
		}else {
			$('.sidebar-menu>i').html('＋').removeClass('sidebar-tap');
			$('.sidebar-menu .menu-sub').hide();

			$(this).html('－').toggleClass('sidebar-tap');
			$(this).siblings('.menu-sub').show();
		}
	});


	let href = window.location.href;
	let start = href.indexOf('#');
	let href2 = '';
	if(start > 0) {
		href2 = href.slice(start+1);
		$('#'+thisAction+' .section-link[href="#'+href2+'"]').addClass('active');
	}else {
		$('#'+thisAction+' .menu-sub .section-link:first').addClass('active');
	}
 
	var $link = $('.content .headerlink');
	var $slink = $('#'+thisAction+' .menu-sub .section-link');
	
	$('#'+thisAction+' .section-link').click(function(){
		$slink.removeClass('active');
		$(this).addClass('active');
	});
}



// 页面滚动 .sidebar提示 start
let scrollArr = [];
$.each( $link, function() {
	let offset = $(this).offset();
	let thisId = $(this).attr('id');
	scrollArr.push(offset.top);
});


$(window).on('scroll', function(){
	let scrollTop = $(document).scrollTop();
	let nap = 110;
	let slength = scrollArr.length;
	let i=0;
	if(scrollTop < (scrollArr[0]-nap) ) {
	}else if(scrollTop >= scrollArr[slength-1]-nap) {
		i = slength-1;
	}else {
		for(i=0; i<scrollArr.length; i++) {
			if(scrollTop>=scrollArr[i]-nap && scrollTop<scrollArr[i+1]-nap) {
				break;
			}
		}
	}

	if($slink.eq(i).length > 0){
		$slink.removeClass('active');
		$slink.eq(i).addClass('active');
	}
});


</script>

    
  </body>
</html>